import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Helper from '../../../../components/Helper';
import color from '../color';
import Box from '../Box';
import s from './CategoryTable.module.css';
import BarTable from '../../../../components/BarTable';

export default function CategoryTable({ className, stats }) {
  // 统计各等级的篡改事件数量
  const calculateChangeEventByLevel = (stats, level) => {
    return stats.reduce((count, stat) => {
      stat?.result?.warnings?.forEach(w => {
        if (w.level === level) {
					(w.detail.text || w.detail.structure || w.detail.resource) && count++
        }
      })
      return count
    }, 0)
  }

  const highLevelEvent = calculateChangeEventByLevel(stats, 4)
  const lowLevelEvent = calculateChangeEventByLevel(stats, 2)

  const data = [
    { name: "高危", value: highLevelEvent, color: color[2] },
    { name: "低危", value: lowLevelEvent, color: color[0] }
  ]

	return (
		<Box
			title={
				<>
					篡改事件统计
					<Helper overlay="按风险URL统计" placement="top" />
				</>
			}
			className={cn(className, s.trend)}
			headerClass={s.header}
		>
			<BarTable
				className={cn(s.table, 'tableFormat')}
				nameColName="威胁等级"
				barColName="发现次数"
				data={data}
			/>
		</Box>
	);
}

CategoryTable.propTypes = {
	className: PropTypes.string,
	stats: PropTypes.arrayOf(
		PropTypes.shape({
			target: PropTypes.string,
			name: PropTypes.string,
			endTime: PropTypes.string,
		})
	),
	jobId: PropTypes.string,
};

CategoryTable.defaultProps = {
	className: s.vulTrend,
};
